<template>
  <div id="formulaTools">
    <div class="checkbox-container">
      <div v-for="(checkbox, index) in selectedCheckboxes" :key="index" class="checkbox-item">
        <label>
          <input
            type="checkbox"
            :value="checkbox.code"
            v-model="checkbox.checked"
            @change="handleCheckboxChange(checkbox, index)"
          />
          {{ checkbox.name }}
        </label>
        <vxe-icon name=" vxe-icon-square-plus-fill" @click="handleIconClick(index, checkbox)"></vxe-icon>
      </div>
    </div>
    <div class="tableBody">
      <vxe-table
        v-loading="loading"
        :data="state.tableList"
        class="mytable-scrollbar"
        border
        style="width: 100%"
        height="auto"
        :edit-config="{ trigger: 'click', mode: 'cell' }"
      >
        <vxe-column title="序号" width="30" type="seq" align="center"></vxe-column>
        <vxe-column
          title="左括号"
          width="80"
          align="left"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-select v-model="row.leftkh" placeholder="请选择" transfer>
              <vxe-option
                v-for="(item, idx) in selectedValue"
                :key="idx"
                :label="item.label"
                :value="item.value"
              ></vxe-option>
            </vxe-select>
          </template>
          <template #default="{ row }">
            <div>
              {{
                selectedValue.filter((data) => data.value === row.leftkh)[0].label
              }}
            </div>
          </template>
        </vxe-column>
        <vxe-column title="条件" min-width="150" align="left">
          <template #default="{ row }">
            <div>{{ row.name }}</div>
          </template>
          <!-- <template #edit="{ row, rowIndex }">
            <vxe-input v-model="row.value" placeholder="请输入内容"
              style="width: 100%"></vxe-input>
          </template>-->
        </vxe-column>
        <vxe-column title="条件" min-width="150" align="left" :visible="false">
          <template #default="{ row }">
            <div>{{ row.code }}</div>
          </template>
          <!-- <template #edit="{ row, rowIndex }">
            <vxe-input v-model="row.value" placeholder="请输入内容"
              style="width: 100%"></vxe-input>
          </template>-->
        </vxe-column>
        <vxe-column
          title="运算"
          width="120"
          align="left"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-select v-model="row.operation" placeholder="请选择" transfer>
              <vxe-option
                v-for="item in operators"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></vxe-option>
            </vxe-select>
          </template>
          <template #default="{ row }">
            <div>
              {{
                operators.filter((data) => data.value ===row.operation)[0].label
              }}
            </div>
          </template>
        </vxe-column>
        <vxe-column
          title="数值类型"
          width="120"
          align="left"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-select v-model="row.valuetype" placeholder="请选择" transfer>
              <vxe-option
                v-for="item in dataType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></vxe-option>
            </vxe-select>
          </template>
          <template #default="{ row }">
            <div>
              {{
                dataType.filter((data) => data.value === row.valuetype)[0].label
              }}
            </div>
          </template>
        </vxe-column>
        <vxe-column
          title="选项值"
          min-width="120"
          align="left"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row, rowIndex }">
            <vxe-input
              v-if="row.valuetype === 'string'"
              v-model="row.value"
              placeholder="请输入内容"
              style="width: 100%"
            ></vxe-input>
            <vxe-input
              v-if="row.valuetype === 'int'"
              type="integer"
              v-model="row.value"
              style="width: 100%"
            ></vxe-input>
            <vxe-input
              v-if="row.valuetype === 'float'"
              type="float"
              v-model="row.value"
              :precision="2"
              :step="0.01"
              style="width: 100%"
            ></vxe-input>
            <VxePulldownStringList
              v-if="row.valuetype === 'stringlist'"
              :stringValues="row.valuearr"
              :isChild="true"
              :childIndex="rowIndex"
              @confirmList="confirmList"
            />

            <!-- :resIsArr="true"
            :isChild="true"-->
            <!-- :dataObj="dataObj" -->
            <!-- @confirmClick="confirmList(data)"  -->

            <!-- 字典集合  -->
            <VxePulldownMultiSelection
              v-if="row.valuetype === 'diclist'"
              :childIndex="rowIndex"
              :url="getResourcesByItemUrl(row)"
              @confirmClick="(data) => confirmList1(data,rowIndex,row)"
              :tableColumn="getResourceTableColum(row)"
              :displayTexts="getDisplayTexts(row)"
              :eqValue="getEqValue(row)"
              :displayTextObj="row.valuearr"
              :dicValues="row.valuearr"
              :includeVal="getEqValue(row)"
              :dataObj="dataObj"
            />

            <VxePulldownStringList
              v-if="row.valuetype === 'intlist'"
              :inputtype="'integer'"
              :stringValues="row.valuearr"
              :isChild="true"
              :childIndex="rowIndex"
              @confirmList="confirmList"
            />
            <VxePulldownStringList
              v-if="row.valuetype === 'floatlist'"
              :inputtype="'float'"
              :stringValues="row.valuearr"
              :isChild="true"
              :childIndex="rowIndex"
              @confirmList="confirmList"
            />
            <vxe-select
              v-if="row.valuetype === 'sexselect'"
              v-model="row.value"
              placeholder="请选择"
              style="width: 100%"
              transfer
            >
              <vxe-option
                v-for="item in genders"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></vxe-option>
            </vxe-select>
            <vxe-select
              v-if="row.valuetype === 'mencycleselect'"
              v-model="row.value"
              placeholder="请选择"
              style="width: 100%"
              transfer
            >
              <vxe-option
                v-for="item in specialPeriod"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></vxe-option>
            </vxe-select>
            <vxe-select
              v-if="row.valuetype === 'boolean'"
              v-model="row.value"
              placeholder="请选择"
              style="width: 100%"
              transfer
            >
              <vxe-option
                v-for="item in whethers"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></vxe-option>
            </vxe-select>
          </template>
          <template #default="{ row }">
            <span
              v-if="row.valuetype === 'string' ||
              row.valuetype === 'int' ||
              row.valuetype === 'string' ||
              row.valuetype === 'float'
              "
            >{{ row.value }}</span>
            <span v-if="row.valuetype === 'sexselect'">
              {{
              getSelect(row,'sexselect')
              }}
            </span>
            <span v-if="row.valuetype === 'mencycleselect'">
              {{
              getSelect(row,'mencycleselect')
              }}
            </span>
            <span v-if="row.valuetype === 'boolean'">
              {{ getSelect(row,'boolean')
              }}
            </span>
            <span
              v-if="row.valuetype === 'stringlist' ||
                row.valuetype === 'diclist' ||
                row.valuetype === 'intlist' ||
                row.valuetype === 'floatlist'
                "
            >
              <vxe-button type="text" content="数组集合"></vxe-button>
            </span>
          </template>
        </vxe-column>
        <vxe-column
          title="右括号"
          width="80"
          align="left"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-select v-model="row.rightkh" placeholder="请选择" transfer>
              <vxe-option
                v-for="item in selectedValue"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></vxe-option>
            </vxe-select>
          </template>
          <template #default="{ row }">
            <span>
              {{
                selectedValue.filter((data) => data.value === row.rightkh)[0].label
              }}
            </span>
          </template>
        </vxe-column>
        <vxe-column
          title="关系"
          width="120"
          align="left"
          :edit-render="{ autofocus: '.vxe-input--inner' }"
        >
          <template #edit="{ row }">
            <vxe-select v-model="row.relationship" placeholder="请选择" transfer>
              <vxe-option
                v-for="item in relationships"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></vxe-option>
            </vxe-select>
          </template>
          <template #default="{ row }">
            <span>
              {{
                relationships.filter((data) => data.value === row.relationship)[0].label
              }}
            </span>
          </template>
        </vxe-column>
        <vxe-column title="操作" width="90" align="center">
          <template #default="{ row, rowIndex }">
            <vxe-button
              type="text"
              icon="vxe-icon-delete-fill"
              class-name="text-red"
              @click="handleDelete(row, rowIndex)"
            ></vxe-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { VXETable, VxeFormPropTypes, VxeFormEvents } from 'vxe-table';
import { ref, reactive, onMounted, getCurrentInstance, watch, defineProps, toRefs } from 'vue';
import { AppStore } from '../stores/store';
import VxePulldownStringList from './VxePulldownStringList.vue';
import VxePulldownMultiSelection from './VxePulldownMultiSelection.vue';
import { IsEmpty } from '@/utils/common';

// 全局变量定义区 ==========
let props = defineProps({}) as any;
defineExpose({ initReferForm });
let store = AppStore();
let showLoading = ref(false); //保存加载状态
let { proxy }: any = getCurrentInstance();
let rptGroup = reactive('');
let operators = reactive([
  {
    value: 'greatthan',
    label: '大于[>]'
  },
  {
    value: 'greatequalthan',
    label: '大于等于[>=]'
  },
  {
    value: 'lessthan',
    label: '小于[<]'
  },
  {
    value: 'lessequalthan',
    label: '小于等于[<=]'
  },
  {
    value: 'equal',
    label: '等于[=]'
  },
  {
    value: 'in',
    label: '包含[in]'
  },
  {
    value: 'notin',
    label: '不包含[not in]'
  },
  {
    value: 'like',
    label: '匹配[like]'
  },
  {
    value: 'notlike',
    label: '不匹配[not like]'
  }
]);
let dataType = reactive([
  {
    value: 'int',
    label: '数值型'
  },
  {
    value: 'string',
    label: '字符型'
  },
  {
    value: 'float',
    label: '浮点型'
  },
  {
    value: 'boolean',
    label: '布尔型'
  },
  {
    value: 'intlist',
    label: '数值集合'
  },
  {
    value: 'stringlist',
    label: '字符串集合'
  },
  {
    value: 'diclist',
    label: '字典集合'
  },
  {
    value: 'floatlist',
    label: '浮点集合'
  },
  {
    value: 'sexselect',
    label: '性别选项'
  },
  {
    value: 'mencycleselect',
    label: '生理周期'
  }
]);
let genders = reactive([
  {
    value: '2',
    label: '女'
  },
  {
    value: '1',
    label: '男'
  },
  {
    value: '',
    label: '未知'
  }
]);
let whethers = reactive([
  {
    value: 1,
    label: '是'
  },
  {
    value: 0,
    label: '否'
  }
]);
let specialPeriod = reactive([
  {
    value: '排卵期',
    label: '排卵期'
  },
  {
    value: '卵泡期',
    label: '卵泡期'
  },
  {
    value: '黄体期',
    label: '黄体期'
  },
  {
    value: '绝经期',
    label: '绝经期'
  },
  {
    value: '妊娠期',
    label: '妊娠期'
  }
]);
let relationships = reactive([
  {
    value: 'and',
    label: '并且[AND]'
  },
  {
    value: 'or',
    label: '或者[OR]'
  }
]);
let selectedValue = reactive([
    {
      value: 0,
      label: 0
    },
    {
      value: 1,
      label: 1
    },
    {
      value: 2,
      label: 2
    },
    {
      value: 3,
      label: 3
    },
    {
      value: 4,
      label: 4
    },
    {
      value: 5,
      label: 5
    },
    {
      value: 6,
      label: 6
    },
    {
      value: 7,
      label: 7
    },
    {
      value: 8,
      label: 8
    },
    {
      value: 9,
      label: 9
    },
    {
      value: 10,
      label: 10
    }
  ]);
// 方法定义区 =============
onMounted(() => {
  getDictItemsList();
});

let displayTextObjBind = reactive([]);
let dictValuesBind = reactive([]);

let loading = ref(false);
const state = reactive({
  tableList: []
});
// let tableList = reactive([]);
let selectedCheckboxes = reactive([]);
let selectedValues = [{}];
let sqlstring = ''; //sql拼接字符串
//获取词典中的规则信息
let dictTreeTypeCodes: any = reactive(['GZTYPE']);

function initReferForm(referForm: any) {
  rptGroup = referForm.rptGroup;
  resetTableList(referForm);
}
//列表重新赋值
function resetTableList(vals: any) {
  state.tableList = IsEmpty(vals.referList) ? reactive([]) : reactive(JSON.parse(vals.referList));

  selectedValues = IsEmpty(vals.selectValue) ? reactive([]) : reactive(JSON.parse(vals.selectValue));

  // 遍历 selectedCheckboxes，根据 selectedValueAny 数组选中对应的复选框.
  for (const checkbox of selectedCheckboxes) {
    if (selectedValues.includes(checkbox.code)) {
      checkbox.checked = true;
    } else {
      checkbox.checked = false;
    }
  }
  // proxy.$forceUpdate();
}
//批量获取字典
async function getDictItemsList() {
  const codes = dictTreeTypeCodes.join(',');
  const url = '/api/sys/basDictDetail/findDictDetailListByDictCodes';
  const dictTreeTypeItems: any = await proxy.$http.get(url, { params: { code: codes } });
  const itemClassType = dictTreeTypeItems.data.find((item) => item.code === 'GZTYPE');
  selectedCheckboxes.push(...itemClassType.detailDataList);
}

//复选框选中事件
function handleCheckboxChange(checkbox, index) {
  // 处理复选框变化事件逻辑
  // 可以在这里根据 checkbox 的状态进行相应的操作
  if (checkbox.checked) {
    handleIconClick(index, checkbox);
    selectedValues.push(checkbox.code);
    //proxy.$forceUpdate();
  } else {
    state.tableList.splice(index, 1);
    const valueIndex = selectedValues.indexOf(checkbox.code);
    if (valueIndex > -1) {
      selectedValues.splice(valueIndex, 1);
    }
  }
  //Array.from(new Set(selectedValues));
}

//新建
function handleIconClick(index, checkbox) {
  //ToDo
  state.tableList.push({
    leftkh: 0,
    key: '',
    name: checkbox.name,
    operation: 'equal',
    valuetype: 'int',
    value: '',
    valuearr: [] as any[],
    rightkh: 0,
    relationship: 'and',
    optionrow: {} as any,
    code: checkbox.code
  });
}

//删除
function handleDelete(row, index) {
  //ToDo
  proxy
    .$confirm('确定删除此记录？', '提示', {
      cancelButtonClass: 'cancvxe-button',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      closeOnClickModal: true
    })
    .then(() => {
      const code = row.value; //获取当前删除的code值，用来对复选框
      const visited = [];
      state.tableList.splice(index, 1);
      if (state.tableList.length > 0) {
        selectedCheckboxes.forEach((checkbox) => {
          checkbox.checked = false; // 将所有复选框的checked属性先设置为false
        });
        state.tableList.forEach((item) => {
          const matchingCheckbox = selectedCheckboxes.find((checkbox) => checkbox.code === item.value);
          if (matchingCheckbox) {
            matchingCheckbox.checked = true; // 找到匹配项时，将对应复选框的checked属性设置为true
          }
        });
      } else {
        selectedCheckboxes.forEach((itemSelect) => {
          itemSelect.checked = false;
        });
      }
    })
    .catch((err) => {});
}

watch(
  () => state.tableList,
  (newValue, oldValue) => {
    // 在 tableList 发生变化时触发回调函数
    calcSqlString();
  },
  { deep: true, immediate: true }
);

//拼凑Sql语句
function calcSqlString() {
  let str = '';
  let strDescribe = '';
  let i = 0;
  for (const iterator of state.tableList) {
    for (const key in iterator) {
      if (Object.prototype.hasOwnProperty.call(iterator, key)) {
        const element = iterator[key];
        //#region  追个计算
        if (key === 'leftkh') {
          str += '('.repeat(Number(iterator[key]));
        }
        if (key === 'key') {
          str += ' ' + iterator.code;
        }
        if (key === 'name') {
          //todo
          str += ' /*' + iterator[key] + '*/ ';
          strDescribe += '（【' + iterator[key] + '】';
        }
        if (key === 'operation') {
          switch (iterator[key]) {
            case 'greatthan':
              str += ' > ';
              strDescribe += '大于';
              break;
            case 'greatequalthan':
              str += ' >= ';
              strDescribe += '大于等于';
              break;
            case 'lessthan':
              str += ' < ';
              strDescribe += '小于';
              break;
            case 'lessequalthan':
              str += ' <= ';
              strDescribe += '小于等于';
              break;
            case 'equal':
              str += ' = ';
              strDescribe += '等于';
              break;
            case 'in':
              str += ' in ';
              strDescribe += '包含';
              break;
            case 'notin':
              str += ' not in ';
              strDescribe += '不包含';
              break;
            case 'like':
              str += ' like ';
              strDescribe += '匹配';
              break;
            case 'notlike':
              str += ' not like ';
              strDescribe += '不匹配';
              break;
            default:
              break;
          }
        }
        if (key === 'valuetype') {
          switch (iterator[key]) {
            case 'int':
              str += ' ' + iterator.value;
              strDescribe += iterator.value;
              break;
            case 'string':
              str += " '" + iterator.value + "'";
              if (iterator.optionrow && iterator.optionrow.code === 'Result') {
                str = str.replace('Result', "'Result'");
                strDescribe += str.replace('Result', "'Result'");
              }
              break;
            case 'float':
              str += ' CAST(' + iterator.value + ' as decimal(19,6))';
              strDescribe += iterator.value + ')';
              break;
            case 'boolean':
              str += ' ' + iterator.value;
              strDescribe += ' ' + iterator.value;
              break;
            case 'intlist':
              let a1 = '';
              for (const op of iterator.valuearr) {
                a1 += ' CAST(' + op + ' as int),';
              }
              a1 = a1.substr(0, a1.length - 1);
              str += '(' + a1 + ')';
              strDescribe += '(' + a1 + ')';
              break;
            case 'stringlist':
              let a2 = '';
              for (const op of iterator.valuearr) {
                a2 += " '" + op + "',";
              }
              a2 = a2.substr(0, a2.length - 1);
              str += '(' + a2 + ')';
              strDescribe += '(' + a2 + ')';
              break;
            case 'diclist':
              let a22 = '';
              for (const op of iterator.valuearr) {
                a22 += " '" + op + "'" + ',';
              }
              a22 = a22.substr(0, a22.length - 1);
              str += '(' + a22 + ')';
              strDescribe += '(' + a22 + ')';
              break;
            case 'floatlist':
              let a3 = '';
              for (const op of iterator.valuearr) {
                a3 += ' CAST(' + op + ' as decimal(19,6)),';
              }
              a3 = a3.substr(0, a3.length - 1);
              str += '(' + a3 + ')';
              strDescribe += '(' + a3 + ')';
              break;
            case 'sexselect':
              str += " '" + iterator.value + "'";
              if (iterator.value === '1') {
                strDescribe += " '男'";
              } else if (iterator.value === '2') {
                strDescribe += " '女'";
              } else if (iterator.value === '') {
                strDescribe += " '未知'";
              }
              break;
            case 'mencycleselect':
              str += " '" + iterator.value + "'";
              strDescribe += " '" + iterator.value + "'";
              break;
            default:
              break;
          }
        }
        if (key === 'rightkh') {
          str += ')'.repeat(Number(iterator[key]));
          strDescribe += ')'.repeat(Number(iterator[key]));
        }
        if (key === 'relationship') {
          if (i < state.tableList.length - 1) {
            str += ' ' + iterator[key];

            if (iterator[key] === 'and') {
              strDescribe += ') 并且';
            } else {
              strDescribe += ') 或者';
            }
          }
        }
        //#endregion
      }
    }
    str += '\n\r';
    strDescribe += '\n\r';
    i++;
  }
  sqlstring = str;
  proxy.$emit('repressChange', {
    tab: state.tableList,
    sqlExpress: str,
    selectValue: selectedValues,
    factorDescribe: strDescribe
  });
}

//项点击
// function  expressionItemClick(item) {
//    keyvaluesearch = '';
//    resourceList = [];
//    curSelExpItem = item;
//   try {
//     switch (item.formulaType) {
//       case 'LIKEDIC':
//       case 'NOTLIKEDIC':
//         getResourcesByItem();
//         //this.getRptRuleItemDetailList();
//         break;
//       default:
//         break;
//     }
//   } catch (error) {
//     //todo
//   }
// }

// function confirmList({ childIndex, arr }) {
//   state.tableList[childIndex].valuearr = Object.assign([], arr);
// }

function confirmList1(data, rowIndex, row) {
  state.tableList[rowIndex].valuearr.length = 0;
  let codeList = [];
  if (row.code == 'DPTID') {
    codeList = data.arr.map((m) => m.code);
  } else if (row.code == 'SAMPLETYPE') {
    codeList = data.arr.map((m) => m.sampleTypeCode);
  } else if (row.code == 'FEEID') {
    codeList = data.arr.map((m) => m.feeCode);
  } else if (row.code == 'PATTYPE') {
    codeList = data.arr.map((m) => m.code);
  }else if (row.code == 'itemno') {
    codeList = data.arr.map((m) => m.itemNo);
  }

  state.tableList[rowIndex].valuearr.push(...codeList);
}

let dataObj = reactive({});

function getResourcesByItemUrl(row: any) {
  let url = '';
  if (row.code == 'DPTID') {
    dataObj = { orgId: store.userInfo.orgId };
    url = '/api/sys/findSysOrgDepartmentList';
  } else if (row.code == 'SAMPLETYPE') {
    dataObj = { orgId: store.userInfo.orgId };
    url = '/api/lab/labSampleType/findSampleTypeList';
  } else if (row.code == 'FEEID') {
    dataObj = { orgId: store.userInfo.orgId };
    url = '/lis/fee/item/findFeeItemList';
  } else if (row.code == 'PATTYPE') {
    dataObj = { code: 'PATTYPE' };
    url = '/api/sys/basDictDetail/findDictDetailList';
  } else if (row.code == 'itemno') {
    dataObj ={ rptGroup: rptGroup };
    url = '/lis/lab/item/findLabItemDictList';
  }
  return url;
}

function getResourceTableColum(row: any) {
  let tableColum = [];
  if (row.code == 'DPTID') {
    tableColum = [
      { field: 'name', title: '名称' },
      { field: 'code', title: '编号' }
    ];
  } else if (row.code == 'SAMPLETYPE') {
    tableColum = [
      { field: 'sampleTypeName', title: '名称' },
      { field: 'sampleTypeCode', title: '编号' }
    ];
  } else if (row.code == 'FEEID') {
    tableColum = [
      { field: 'feeName', title: '名称' },
      { field: 'feeCode', title: '编号' }
    ];
  } else if (row.code == 'PATTYPE') {
    tableColum = [
      { field: 'name', title: '名称' },
      { field: 'code', title: '编号' }
    ];
  } else if (row.code == 'itemno') {
    tableColum = [
      { field: 'itemNo', title: '编号' }, //列标题
      { field: 'itemNa', title: '名称' }
    ];
  }
  return tableColum;
}

function getDisplayTexts(row: any) {
  let displayTexts = [];
  if (row.code == 'DPTID') {
    displayTexts = ['name'];
  } else if (row.code == 'SAMPLETYPE') {
    displayTexts = ['sampleTypeName'];
  } else if (row.code == 'FEEID') {
    displayTexts = ['feeName'];
  } else if (row.code == 'PATTYPE') {
    displayTexts = ['name'];
  } else if (row.code == 'itemno') {
    displayTexts = ['itemNa'];
  }
  return displayTexts;
}
function getEqValue(row: any) {
  let eqVal = '';
  if (row.code == 'DPTID') {
    eqVal = 'code';
  } else if (row.code == 'SAMPLETYPE') {
    eqVal = 'sampleTypeCode';
  } else if (row.code == 'FEEID') {
    eqVal = 'feeCode';
  } else if (row.code == 'PATTYPE') {
    eqVal = 'code';
  }else if (row.code == 'itemno') {
    eqVal = 'itemNo';
  }
  return eqVal;
}
function getSelect(row, flag) {
  if (flag === 'sexselect') {
    const temp = genders.filter((data) => data.value === row.value);
    if (temp[0]) {
      return temp[0].label;
    }
  }
  if (flag === 'mencycleselect') {
    const temp = specialPeriod.filter((data) => data.value === row.value);
    if (temp[0]) {
      return temp[0].label;
    }
  }
  if (flag === 'boolean') {
    const temp = whethers.filter((data) => data.value === row.value);
    if (temp[0]) {
      return temp[0].label;
    }
  }
}
</script>
<style lang="scss" scoped>
#formulaTools {
  width: 100%;
  height: 100%;

  .checkbox-container {
    display: flex;
    height: 20px;
  }

  .checkbox-item {
    margin-right: 4px;
  }

  .tableBody {
    height: calc(100% - 20px);
  }
}
</style>
